<template>
	<transition name="el-zoom-in-center">
		<div class="JNPF-preview-main">
			<div class="JNPF-common-page-header">
				<el-page-header @back="goBack" :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"/>
				<div class="options">
					<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
					<el-button @click="goBack">取 消</el-button>
				</div>
			</div>
			<el-row :gutter="15"  class="main" :style="{margin: '0 auto',width:'100%'}">
			<el-form ref="elForm" :model="dataForm" size="medium" label-width="120px" label-position="right" :disabled="!!isDetail" :rules="rules">
				<el-col :span="12">
					<el-form-item label="预案名称" prop="yamc" required >
						<el-input v-model="dataForm.yamc" placeholder="请输入预案名称" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="所属部门" prop="sybm" required >
						<el-select filterable v-model="dataForm.sybm" placeholder="请选择所属部门" @change="personSomePerson" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in sybmOptions" :key="index" :label="item.F_FullName" :value="item.F_Id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="预案类型" prop="yalx" required >
						<el-input v-model="dataForm.yalx" placeholder="请输入预案类型" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="危险源关联" prop="wxygl" required >
						<el-input v-model="dataForm.wxygl" placeholder="请输入危险源关联" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="预案级别" prop="yajb" required >
						<el-select v-model="dataForm.yajb" placeholder="请选择预案级别" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in yajbOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="发布实施日期" prop="fbssrq" required >
						<el-date-picker v-model="dataForm.fbssrq" placeholder="请选择发布实施日期" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="编写部门" prop="bxbm" required >
						<el-select v-model="dataForm.bxbm" placeholder="请选择编写部门" clearable @change="person" :style='{"width":"100%"}'  filterable>
							<el-option v-for="(item, index) in bxbmOptions" :key="index" :label="item.F_FullName" :value="item.F_Id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<!-- <el-form-item label="编写人" prop="bxr" required >
						<el-select v-model="dataForm.bxr" placeholder="请选择编写人" clearable :style='{"width":"100%"}' filterable>
							<el-option v-for="(item, index) in bxrOptions" :key="index" :label="item.F_RealName" :value="item.F_Id" ></el-option>
						</el-select>
					</el-form-item> -->
						<el-form-item label="编写人" prop="bxr" >
							<el-select multiple v-model="dataForm.bxr" placeholder="请选择编写人" clearable :style='{"width":"100%"}' filterable>
								<el-option v-for="(item, index) in personAll" :key="index" :label="item.realName" :value="item.id" ></el-option>
							</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="状态" prop="zt" >
						<el-select v-model="dataForm.zt" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in ztOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="应急队伍" prop="yjdw" >
						<el-select filterable v-model="dataForm.yjdw" placeholder="请选择应急队伍" clearable :style='{"width":"100%"}' multiple >
							<el-option v-for="(item, index) in yjdwOptions" :key="index" :label="item.DWMC" :value="item.Id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="应急物资" prop="yjwz" >
						<el-select filterable v-model="dataForm.yjwz" placeholder="请选择应急物资" clearable :style='{"width":"100%"}' multiple >
							<el-option v-for="(item, index) in yjwzOptions" :key="index" :label="item.WZMC" :value="item.ID" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="应急人员" prop="yjry" >
						<!-- <el-select filterable v-model="dataForm.yjry" placeholder="请选择应急人员" clearable :style='{"width":"100%"}' multiple >
							<el-option v-for="(item, index) in yjryOptions" :key="index" :label="item.F_RealName" :value="item.F_Id" ></el-option>
						</el-select> -->
							<el-select multiple v-model="dataForm.yjry" placeholder="请选择应急人员" clearable :style='{"width":"100%"}' filterable>
								<el-option v-for="(item, index) in personSome" :key="index" :label="item.realName" :value="item.id" ></el-option>
							</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="预案附件" prop="yafj" >
						<JNPF-UploadFz v-model="yafjList" accept="" :fileSize="2" sizeUnit="MB" :limit="9" buttonText="点击上传" >
						</JNPF-UploadFz>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="执行状态" prop="zxzt" >
						<el-select v-model="dataForm.zxzt" placeholder="请输入执行状态" disabled clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in zxztOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-form>
			</el-row>
		</div>
	</transition>

</template>
<script>
import request from '@/utils/request'
import {getDictionaryDataSelector}from '@/api/systemData/dictionary'
import {previewDataInterface}from '@/api/systemData/dataInterface'
import {departmentPerson}from '@/api/systemIntegration/recard'
export default {
    data() {
      return {
				personAll:[], // 编写人
				personSome:[], // 应急人员
        visible: false,
        isDetail: false,
		dataFormNew:[],
        dataForm: {
					yamc:undefined,
					sybm:undefined,
					yalx:undefined,
					wxygl:undefined,
					yajb:undefined,
					bxr:undefined,
					bxbm:undefined,
					fbssrq:undefined,
					zt:undefined,
					yjdw:[],
					yjwz:[],
					yjry:[],
					yafj:undefined,
					zxzt:"0",
					bgnr:undefined

        },
        rules: {
						yamc:[
						{
							required:true,
							message:'请输入预案名称',
							trigger:'blur'
						},
						],
						sybm:[
						{
							required:true,
							message:'请输入所属部门',
							trigger:'blur'
						},
						],
						yalx:[
						{
							required:true,
							message:'请输入预案类型',
							trigger:'blur'
						},
						],
						wxygl:[
						{
							required:true,
							message:'请输入危险源关联',
							trigger:'blur'
						},
						],
						yajb:[
						{
							required:true,
							message:'请输入预案级别',
							trigger:'blur'
						},
						],
						bxr:[
						{
							required:true,
							message:'请输入编写人',
							trigger:'blur'
						},
						],
						bxbm:[
						{
							required:true,
							message:'请输入编写部门',
							trigger:'blur'
						},
						],
						fbssrq:[
						{
							required:true,
							message:'请输入发布实施日期',
							trigger:'blur'
						},
						],

        },
				sybmOptions:[],
				yajbOptions:[{"fullName":"综合预案","id":"综合预案"},{"fullName":"专项预案","id":"专项预案"},{"fullName":"现场处置方案","id":"现场处置方案"}],
				bxrOptions:[],
				bxbmOptions:[],
				ztOptions:[{"fullName":"现行","id":"现行"},{"fullName":"作废","id":"作废"}],
				yjdwOptions:[],
				yjwzOptions:[],
				yjryOptions:[],

					yafjList:[],
				zxztOptions:[{"fullName":"未执行","id":"0"},{"fullName":"已执行","id":"1"},{"fullName":"停止","id":"2"}],
		// bgdataForm:{}	
		bgFormObj:{},
      }
    },
    created() {
		this.getSybmOptions();
		this.getBxrOptions();
		this.getBxbmOptions();
		this.getYjdwOptions();
		this.getYjwzOptions();
		this.getYjryOptions();

    },
	computed:{
		tagsListContent(){
			return JSON.stringify(this.dataForm);
		} //tagsListContent 这个不能用tagsList这个，不然会报错（报一个和data里面数据重复的错误），名字不能用重复的
    },
    methods: {
		getSybmOptions()
		{
			previewDataInterface('772d2cbcadd24df79243e3d92ef5f690').then(res => {
				this.sybmOptions = res.data
			})
		},
		getBxrOptions()
		{
			previewDataInterface('8bca424f16d6448ab09e57a028853aa9').then(res => {
				this.bxrOptions = res.data
			})
		},
		getBxbmOptions()
		{
			previewDataInterface('772d2cbcadd24df79243e3d92ef5f690').then(res => {
				this.bxbmOptions = res.data
			})
		},
		getYjdwOptions()
		{
			previewDataInterface('1bc1b1e0138a4767835729e9f531990e').then(res => {
				this.yjdwOptions = res.data
			})
		},
		getYjwzOptions()
		{
			previewDataInterface('b5c62631d0534c6e876dff010edb4ae6').then(res => {
				this.yjwzOptions = res.data
			})
		},
		getYjryOptions()
		{
			previewDataInterface('8bca424f16d6448ab09e57a028853aa9').then(res => {
				this.yjryOptions = res.data
			})
		},

           goBack() {
                    this.$emit('refresh')
                },
      init(id, isDetail) {

        this.dataForm.id = id || 0;
        this.visible = true;
        this.isDetail = isDetail || false;
        this.$nextTick(() => {
          this.$refs['elForm'].resetFields();
          if (this.dataForm.id) {
            request({
              url: '/api/System/YJYAXX/' + this.dataForm.id,
              method: 'get'
            }).then(res =>{
              this.dataForm = res.data;
				this.dataForm.yjdw = this.dataForm.yjdw ? this.dataForm.yjdw.split(','):[];
				this.dataForm.yjwz = this.dataForm.yjwz ? this.dataForm.yjwz.split(','):[];
				this.dataForm.yjry = this.dataForm.yjry ? this.dataForm.yjry.split(','):[];
				this.yafjList = this.dataForm.yafj ? JSON.parse(this.dataForm.yafj) : [];
            })
          }
        })
      },
			// 编写人
			async person(id) {
				this.dataForm.bxr = ''
				const {data} = await departmentPerson({organizeId:id})
				this.personAll  = data.list
			},
			// 应急人员
			async personSomePerson(id) {
				this.dataForm.yjry = ''
				const {data} = await departmentPerson({organizeId:id})
				this.personSome= data.list
			},
      // 表单提交
      dataFormSubmit() {
        this.$refs['elForm'].validate((valid) => {
          if (valid) {
				this.dataForm.yjdw = this.dataForm.yjdw.join(',');
				this.dataForm.yjwz = this.dataForm.yjwz.join(',');
				this.dataForm.yjry = this.dataForm.yjry.join(',');
				this.$set(this.dataForm, 'yafj', JSON.stringify(this.yafjList));

				let that = this;
				if(that.bgFormObj.yjwz !== undefined){
					let yjwzName = [];
					if(that.yjwzOptions.length > 0){
						for(let i=0;i<that.yjwzOptions.length;i++){
							for(let r=0;r<that.bgFormObj.yjwz.length;r++){
								if(that.yjwzOptions[i].ID == that.bgFormObj.yjwz[r]){
									yjwzName.push(that.yjwzOptions[i].WZMC);
								}	
							}
						}
						that.bgFormObj.yjwz = yjwzName;
					}
				}
				if(that.bgFormObj.yjdw !== undefined){
					let yjdwName = [];
					if(that.yjdwOptions.length > 0){
						for(let i=0;i<that.yjdwOptions.length;i++){
							for(let r=0;r<that.bgFormObj.yjdw.length;r++){
								if(that.yjdwOptions[i].Id == that.bgFormObj.yjdw[r]){
									yjdwName.push(that.yjdwOptions[i].DWMC);
								}	
							}
						}
						that.bgFormObj.yjdw = yjdwName;
					}
				}
				if(that.bgFormObj.yjry !== undefined){
					let yjryName = [];
					if(that.yjwzOptions.length > 0){
						for(let i=0;i<that.yjryOptions.length;i++){
							for(let r=0;r<that.bgFormObj.yjry.length;r++){
								if(that.yjryOptions[i].F_Id == that.bgFormObj.yjry[r]){
									yjryName.push(that.yjryOptions[i].F_RealName);
								}	
							}
						}
						that.bgFormObj.yjry = yjryName;
					}
				}
				if(that.bgFormObj.yjry !== undefined){
					let yjryName = [];
					if(that.yjwzOptions.length > 0){
						for(let i=0;i<that.yjryOptions.length;i++){
							for(let r=0;r<that.bgFormObj.yjry.length;r++){
								if(that.yjryOptions[i].F_Id == that.bgFormObj.yjry[r]){
									yjryName.push(that.yjryOptions[i].F_RealName);
								}	
							}
						}
						that.bgFormObj.yjry = yjryName;
					}
				}
				if(that.bgFormObj.bxbm !== undefined){
					let bxbmName = [];
					if(that.bxbmOptions.length > 0){
						for(let i=0;i<that.bxbmOptions.length;i++){
							if(that.bxbmOptions[i].F_Id == that.bgFormObj.bxbm){
								bxbmName.push(that.bxbmOptions[i].F_FullName);
							}
						}
						that.bgFormObj.bxbm = bxbmName;
					}
				}
				if(that.bgFormObj.bxr !== undefined){
					let bxrName = [];
					if(that.bxbmOptions.length > 0){
						for(let i=0;i<that.bxrOptions.length;i++){
							if(that.bxrOptions[i].F_Id == that.bgFormObj.bxr){
								bxrName.push(that.bxrOptions[i].F_RealName);
							}
						}
						that.bgFormObj.bxr = bxrName;
					}
				}
				if(that.bgFormObj.sybm !== undefined){
					let sybmName = [];
					if(that.sybmOptions.length > 0){
						for(let i=0;i<that.sybmOptions.length;i++){
							if(that.sybmOptions[i].F_Id == that.bgFormObj.sybm){
								sybmName.push(that.sybmOptions[i].F_FullName);
							}
						}
						that.bgFormObj.sybm = sybmName;
					}
				}
				let ObjForm = this.bgFormObj;
			    let newbgForm = {};
				for(let i in ObjForm){
					if(i == 'id'){
						newbgForm.id = ObjForm[i];
					}
					if(i == 'sybm'){
						newbgForm.所属部门 = ObjForm[i];
					}
					if(i == 'yamc'){
						newbgForm.预案名称 = ObjForm[i];
					}
					if(i == 'yalx'){
						newbgForm.预案类型 = ObjForm[i];
					}
					if(i == 'wxygl'){
						newbgForm.危险源关联 = ObjForm[i];
					}
					if(i == 'yajb'){
						newbgForm.预案级别 = ObjForm[i];
					}
					if(i == 'bxr'){
						newbgForm.编写人 = ObjForm[i];
					}
					if(i == 'bxbm'){
						newbgForm.编写部门 = ObjForm[i];
					}
					if(i == 'fbssrq'){
						newbgForm.发布实施日期 = ObjForm[i];
					}
					if(i == 'zt'){
						newbgForm.状态 = ObjForm[i];
					}
					if(i == 'yjdw'){
						newbgForm.应急队伍 = ObjForm[i];
					}
					if(i == 'yjwz'){
						newbgForm.应急物资 = ObjForm[i];
					}
					if(i == 'yjry'){
						newbgForm.应急人员 = ObjForm[i];
					}
					if(i == 'zxzt'){
						newbgForm.执行状态 = ObjForm[i];
					}
				}
				let bgStr = '';
				for(let i in newbgForm){
					bgStr += i + '变更为' + newbgForm[i] + ';'
				}
				this.dataForm.bgnr = bgStr;
            if (!this.dataForm.id) {
              request({
                url: '/api/System/YJYAXX',
                method: 'post',
                data: this.dataForm,
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            } else {
              request({
                url: '/api/System/YJYAXX/' + this.dataForm.id,
                method: 'PUT',
                data: this.dataForm
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            }
          }
        })
      },
		unique(arr) {
            return Array.from(new Set(arr))
        }
    },
	watch: {
		tagsListContent(val,old){
            let newTagVal = JSON.parse(val);
            let oldTagOld = JSON.parse(old);
			let bgObj = {};
			for (let i in newTagVal) {
				if(newTagVal[i] !== oldTagOld[i]){
					bgObj[i] = newTagVal[i];
				}
			}
			let yjdwArr = JSON.stringify(bgObj.yjdw);
			let oldyjdwArr = JSON.stringify(oldTagOld.yjdw);
			if(yjdwArr == oldyjdwArr){
				delete bgObj.yjdw
			}
			let yjwzArr = JSON.stringify(bgObj.yjwz);
			let yjwzdwArr = JSON.stringify(oldTagOld.yjwz);
			if(yjwzArr == yjwzdwArr){
				delete bgObj.yjwz
			}
			let yjryArr = JSON.stringify(bgObj.yjry);
			let yjrydwArr = JSON.stringify(oldTagOld.yjry);
			if(yjryArr == yjrydwArr){
				delete bgObj.yjry
			}
			if(bgObj.id !== undefined){
				delete bgObj.id
			}
			if(bgObj.yafj !== undefined){
				delete bgObj.yafj
			}
			let bgArr = [];
			if(bgObj.zxzt == undefined){
				bgArr.push(bgObj);
				for(let i in bgObj){
					this.bgFormObj[i] = bgObj[i];
				}
				this.dataFormNew = bgArr;
			}
        },
	},
  }
  </script>